<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
	<head th:replace="_fragments :: head">
		<meta charset="UTF-8">
		<title>淮河流域注册页面</title>
		<link type="text/css" rel="stylesheet" href="../../static/css/style.css" th:href="@{/css/style.css}">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
		<link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
	</head>
	<body>
	    <nav th:replace="_fragments :: nav"></nav>
		<div class="login_banner">
				<div id="l_content">
					<span class="login_word">欢迎注册</span>
				</div>
				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="tit">
								<h1>注册会员</h1>
								<span class="errorMsg"></span>
							</div>
							<div class="form">
								<form action="login_success.html" th:action="@{/user/regist}" th:method="post">
									<br />
									<label>用户名称：</label>
									<input class="itxt" type="text" placeholder="请输入用户名"
										   autocomplete="off" tabindex="1" name="name" id="username" />
									<br />
									<br />
									<label>用户密码：</label>
									<input class="itxt" type="password" placeholder="请输入密码"
										   autocomplete="off" tabindex="1" name="pwd" id="password" />
									<br />
									<br />
									<label>确认密码：</label>
									<input class="itxt" type="password" placeholder="确认密码"
										   autocomplete="off" tabindex="1" name="repwd" id="repwd" onkeyup="QRpwd()"/>
									<br />
									<br />
									<label>电子邮件：</label>
									<input class="itxt" type="text" placeholder="请输入邮箱地址"
										   autocomplete="off" tabindex="1" name="email" id="email" />
									<br />
									<br />
									<div class="ui input" th:classappend="${isError=='yes'} ? 'error' : '' ">
										<label>验证码：</label>
										<input class="itxt" name="verCode" type="text" style="width: 130px;" id="code"  placeholder="请输入验证码"
											   th:attr="placeholder=*{msg}==null ? 请输入验证码:*{msg}"/>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<img alt="" src="../../static/images/code.bmp" th:src="@{/user/captcha}" style="float: right; margin-right: 40px;height:45px;">
									</div>

									<br />
									<br />
									<input type="submit" value="注册" id="sub_btn" /><br/><br/>
									<input type="reset" value="重置" id="ret_btn" />
								</form>
							</div>

						</div>
					</div>
				</div>
			</div>
		<div id="bottom">
			<span>

			</span>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
	<script type="text/javascript">
		// 页面加载完成之后
		$(function () {
			// 给注册绑定单击事件
			$("#sub_btn").click(function (){
				//验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
				//1、获取用户名输入框中得内容；
				var usernameText=$("#username").val();
				//2、创建正则表达式对象
				var usernamePatt=/^\w{5,12}$/;
				//3、使用test方法验证
				if(!usernamePatt.test(usernameText)){
					//4、提示用户结果
					$("span.errorMsg").text("用户名必须由字母，数字下划线组成，并且长度为5到12位！");

					return false;
				}

				//验证密码，正则与用户名一致
				//1、获取密码输入框中得内容；
				var passwordText=$("#password").val();
				//2、创建正则表达式对象
				var passwordPatt=/^\w{5,12}$/;
				//3、使用test方法验证
				if(!passwordPatt.test(passwordText)){
					//4、提示用户结果
					$("span.errorMsg").text("密码必须由字母，数字下划线组成，并且长度为5到12位！");

					return false;
				}

				//验证确认密码与密码相同
				var repwdText=$("#repwd").val();
				if(repwdText!=passwordText){
					//提示用户结果
					$("span.errorMsg").text("确认密码与密码不一致！");

					return false;
				}

				//验证邮箱

				//1、获取邮箱输入中得内容
				var emailText=$("#email").val();
				//2、创建正则表达式对象
				var emailPatt=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				//3、使用test验证
				if(!emailPatt.test(emailText)){
					//4、提示用户结果
					$("span.errorMsg").text("邮箱不合法！");

					return false;
				}

				//验证码，只需要验证不为空即可
				var codeText=$("code").val();
				//去掉验证码得空格
				codeText=$.trim(codeText);
				if(codeText==null||codeText==""){
					$("span.errorMsg").text("验证码不能为空！")
				}


				$("span.errorMsg").text("");

			})

		});

		//确认密码
		function QRpwd(){
			var pwd=$("#password").val();
			var qrpwd=$("#repwd").val();
			if(pwd!=qrpwd){
				// alert("hello");
				// $("span.errorMsg").text("确认密码与密码不一致！");
				$("#repwd").borderColor="red";
			}
		}
	</script>
</html>